iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

Web Component 網頁元件之路系列 第 20

[Day20] - 串接 React Component 與 Vue Component 的 DATA

  • 分享至 

  • xImage
  •  

使用組件跟組件的組合 , 形成一個頁面

勢必會遇到經典的組件傳值 issue (下圖左側)

以大家常使用的 Facebook 為例 ,

顯示使用者資訊的區塊有 4 個

如果轉換成 Component 視角來看 ,

勢必我們需要將 userData 傳來傳去 ,

如果 userData 改變 , 你就要通知向上通知 , 又向下通知 , 通過層層關卡的通知鏈

也許我們只要通知一個人 , 由他通知該通知的人就好

那在 Web Component 中 , 有什麼方式去建立一個 資料集中區 , 通知該通知的人呢 ?

我們來使用 Web Components Redux 來跨過 Web component 的層層傳值 issue 吧 !

前期準備

當然是建立要用到的組件

  • navigation
  • create-story
  • navbar
  • stories

這裡有一個 zip 提供下載

首先 , 我們需要有一個多層的 web components 組 ( 至少要有 4 層 )

然後我們一層一層的傳遞資料 , ~~ 好麻煩阿 ~~

接著我們將資料接到 Redux 上面 , 輕鬆寫意的傳值阿 , 蘇福

參考資料


上一篇
[Day19] - MyRedux 手動製作簡易版 Redux
下一篇
[Day21] - 製作 Web component 的一些工具
系列文
Web Component 網頁元件之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言